import React from 'react';
import { CardLink, CardLinkGroup } from '@/components/CardLink';
import { Fragment } from '@/components/Fragment';
import { Grid, Icon, Link } from '@aws-amplify/ui-react';
import { ColorsIcon, TypographyIcon, SizesIcon } from './icons';
import { MdOutlineAutoAwesome } from 'react-icons/md';

Amplify UI follows a consistent pattern when defining our default tokens for properties such as color, font size, border radius, and more. In addition to the reference here, you can browse our <Link isExternal href="https://github.com/aws-amplify/amplify-ui/tree/main/packages/ui/src/theme/tokens">default tokens</Link> and their corresponding types on GitHub.

<CardLinkGroup title="Explore theme tokens" id="explore-theme-tokens" templateColumns="repeat(auto-fill, minmax(18rem, 1fr))">
  <CardLink 
    icon={<ColorsIcon />}
    href="/react/theming/default-theme/colors" 
    title="Colors" 
    desc="Tokens that define our default color palette" />

  <CardLink 
    icon={<TypographyIcon />}
    href="/react/theming/default-theme/typography" 
    title="Typography" 
    desc="Font families, font sizes, line heights and more" />

  <CardLink 
    icon={<SizesIcon />}
    href="/react/theming/default-theme/sizes" 
    title="Sizes" 
    desc="Tokens for spacing, border widths and radii" />
</CardLinkGroup>

## Referencing default theme tokens

The overall structure of the default theme object gives us a clue as to how to reference each token. If we look at the top level of the object, we can see how the tokens are separated by properties:

```typescript file=../../../../../../packages/ui/src/theme/tokens/index.ts#L25-L41

```

If we use `space` as an example, we'd discover its token definition looks similar to the following (shortened for example):

```json
  space: {
    xxs: {},
    xs: {},
    small: {
      value: "0.75rem"
    }
    medium: {},
    large: {},
  }
```

All of our tokens follow this pattern: a top level namespace that is further defined by a scale, each which has their own unique value. In the case of our space design tokens, that scale is based on a size: small, medium, large, etc. Our [color tokens](/react/theming/default-theme/colors#neutral), on the other hand, are further defined by hue (red, blue, yellow, etc), and then by a numerical scale based on lightness (10-100). 

<Fragment>{({ platform }) => import(`./tokenUsage.${platform}.mdx`)}</Fragment>